<template>
	<div>
		<div class="LabelInput" v-for="litem in LabelInput" v-show="!litem.show" :class="{pointerevents:litem.pointerevents===true}">
			<label class="label" v-if="litem.label!=='no'">{{litem.label}}</label>
			<div class="el-input-box">
				<city-select v-if="litem.cityselect"></city-select>
				<el-input class="input " v-model="litem.name" :maxlength="litem.maxlength" :disabled="litem.disabled" v-if="litem.textsta"
				 placeholder="请输入内容" :show-password="litem.showpassword" @click.native="labelinputclick(litem.label)" @blur="changetext(litem)"></el-input>
				<el-button class="width" v-if="litem.buttonStart" @click="changetext(litem)">{{litem.buttonText}}</el-button>
				<div class="elradio" v-if="litem.elradiostatus">
					<el-radio @change="radiosel(litem)" v-model="litem.elradio.radio" :label="litem.elradio.label[0]" :disabled="litem.disabled">{{litem.elradio.list[0]}}</el-radio>
					<el-radio @change="radiosel(litem)" v-model="litem.elradio.radio" :label="litem.elradio.label[1]" :disabled="litem.disabled">{{litem.elradio.list[1]}}</el-radio>

				</div>
				<div class="block" v-if="litem.tiempicker">
					<el-date-picker :disabled="litem.disabled" value-format="yyyy-MM-dd" v-model="litem.tiemval" @change="timepicker(litem)"
					 type="date" placeholder="选择日期">
					</el-date-picker>
				</div>
				<el-select v-model="litem.selectoption.value" @change="changetext(litem)" placeholder="请选择" v-if="litem.selectoptionsta">
					<el-option v-for="sitem in litem.selectoption.list" :key="sitem" :label="sitem" :value="sitem">
					</el-option>
				</el-select>
				<div class="well" v-if="litem.wellstatus">
					<el-checkbox-group v-model="litem.well.checkList" @change="checkboxlist(litem)">
						<el-checkbox v-for="(witem, key, index) in litem.well.list" :key="index" :label="witem"></el-checkbox>
					</el-checkbox-group>
				</div>
				<textarea v-if="litem.textarea==='textarea'" @blur="changetext(litem)" v-model="litem.name"></textarea>
			</div>
			<div class="map" @click="mapclose" v-show="litem.mapshow">
				<div id="container" @click="containerfalse"></div>
			</div>
		</div>

	</div>
</template>

<script>
	import CitySelect from "./CitySelect.vue";
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		props: ["AddList"],
		data() {
			return {}
		},
		computed: {
			...mapGetters([
				'LabelInput',
			])
		},
		components: {
			CitySelect
		},
		created() {},
		methods: {

			...mapActions({
				setLabelInput: "setLabelInput",
			}),
			radiosel(data) {
				this.$parent.getsondata_radio(data)
			},
			changetext(data) {
				this.$parent.getchangetext(data)
			},
			timepicker(data) {
				this.$parent.gettimepicker(data)
			},
			labelinputclick(res) {
				var labelinputData = this.LabelInput;
				if (res === "经营地址")
					for (var i = 0; i < labelinputData.length; i++) {
						if (labelinputData[i].label === res) {
							this.init();
							labelinputData[i].mapshow = true;
						}
					}
				this.setLabelInput(labelinputData);
			},
			checkboxlist(res) {
				this.$parent.getcheckboxlist(res)
			},
			mapclose() {
				this.mapshow = false;
			},
			containerfalse(e) {
				// window.event ? window.event.cancelBubble = true : e.stopPropagation();
			},
		},
	}
</script>

<style lang="less">
	.LabelInput {
		display: flex;
		align-items: center;
		padding: 10px 0;
		box-sizing: border-box;
		color: #555;

		.label{
		text-align: right;
		padding-right: 15px;
		box-sizing: border-box;
		
	}
		&.pointerevents {
			pointer-events: none;
		}

		

		.tox.tox-tinymce {
			display: none;
		}


		.el-input-box {
			width: 660px;
			display: flex;

			textarea {
				width: 100%;
				height: 100px;
				border: 1px solid #e2e2e2;
			}

			.well {
				width: 100%;
				border: 1px solid #e2e2e2;
				display: flex;
				flex-wrap: wrap;

				.el-checkbox {
					width: 30%;
					margin: 10px 5px;
				}
			}

			.el-input__inner,
			.el-button {
				height: 30px;
				line-height: 30px;
				border-color: #e2e2e2;
			}

			.el-button {
				padding: 0 15px;
				box-sizing: border-box;
			}

			.input {
				flex: 1;

			}

			.width {
				flex: 1;
				margin-left: 20px;
			}

			.elradio {
				display: flex;
				align-items: center;
				padding: 10px 0;
				box-sizing: border-box;

				.el-radio {
					margin: 0 20px;
				}
			}

			.el-input__icon {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.el-select-dropdown__item {
				display: flex;
			}

			.el-select,
			.block,
			.el-date-editor.el-input,
			.el-date-editor.el-input__inner {
				width: 100%;
			}
		}
	}
</style>
